<template>
    <keep-alive>
        <div class="container" style="margin-top:60px">
            <home-nav-bar></home-nav-bar>
            <div class="row pt-5" style="min-height:70vh">
                <div class="col-12 3  col-lg-6 d-flex flex-column justify-content-center">
                    <div class="mt-2">
                        <div class="fs-1 fw-bold">小荣的网络日志</div>
                        <div class="text-black-50 mt-2 " style="text-indent:2rem">
                            一个基于Vue3/Vite/TypeScript/Bootstrap的个人前端开发日志以及UI&前端资源整合网站。在这里您可以看到以下内容：
                        </div>
                    </div>
                    <ul class="mt-2 fs-5">
                        <li class=" mt-2"><i class="me-3 bi bi-check2-circle text-danger"></i>前端相关库的使用日志及学习优质学习资源
                        </li>
                        <li class=" mt-2"><i class="me-3 bi bi-check2-circle text-danger"></i>UI设计灵感，方案及相关素材资源网站
                        </li>
                        <li class=" mt-2"><i class="me-3 bi bi-check2-circle text-danger"></i>开发设计相关工具库的整合推荐</li>
                        <li class=" mt-2"><i class="me-3 bi bi-check2-circle text-danger"></i>推荐等等~</li>
                    </ul>
                    <div class="mt-5">
                        <button type="button" class="btn btn-outline-success px-5">
                            支持作者
                        </button>
                    </div>
                    <div class="text-black-50 mt-1">稀土掘金@小荣的前端网络日志</div>
                </div>
                <div class="col d-flex flex-column justify-content-center">
                    <div id="animationIndex" ref="animationIndex" style="height:100%"></div>
                </div>
            </div>
            <div style="min-height:25vh">
                <div class="d-flex align-items-center align-content-center ">
                    <div class="h4">推荐<i class="bi bi-fire  ms-1" style="color: #FF5858;"></i></div>
                </div>
                <div class="d-flex mt-2 align-content-center align-items-center  ">
                    <iconButtonList :iconList="iconList"></iconButtonList>
                </div>
                <div class="text-black-50 text-end mt-5 d-none  d-md-flex justify-content-end ">
                    <i class="bi bi-yelp d-sm-table-row text-warning me-2"></i>如有侵权，请联系删除。
                </div>
            </div>
        </div>
    </keep-alive>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from "vue";
import lottie from "lottie-web";
import json from "../../assets/json/115615-slime-jump.json";
import Icon1 from '~src/assets/icon/Icon1.png'
import Icon2 from '~src/assets/icon/Icon2.png'
import Icon3 from '~src/assets/icon/Icon3.png'
import Icon4 from '~src/assets/icon/Icon4.png'
import Icon5 from '~src/assets/icon/Icon5.png'
export default defineComponent({
    name: "Index",
    setup() {
        const data = reactive({
            name: "rong",
            jsonShow: false,
            iconList: [
                { path: '/web/echats', icon:Icon1, title: 'ECharts', info: '暂无介绍' },
                { path: '/web/vue', icon:Icon5, title: 'Vue', info: '暂无介绍' },
                { path: '/web/qqmap',icon:Icon3, title: '腾讯地图API', info: '暂无介绍' },
                { path: '/web/socketio', icon:Icon4, title: 'SocketIO', info: '暂无介绍' },
                { path: '/web/pinia',icon:Icon2, title: 'Pinia', info: '暂无介绍' }
            ]
        });
        const animationIndex = ref(null)
        return {
            ...toRefs(data),
        };
    },
    mounted() {
        // const toast = this.$Toast({
        //     value: '欢迎访问！',
        //     duration: 0, // 如果大于0则不必使用destory方法
        //     background: '#000',
        //     color: '#fff'
        // })
        // setTimeout(() => {
        //     toast.destory && toast.destory()
        // }, 3000);
        const element: HTMLElement | null =
            document.getElementById("animationIndex");
        if (element) {
            // 初始化动画
            let animation = ref<any>(null);
            console.log(animation);
            animation.value = lottie.loadAnimation({
                container: element,
                renderer: "svg",
                loop: true,
                autoplay: true,
                animationData: json,
            });
        }
    },
});
</script>

<style scoped lang="scss">
.text-four-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-break: break-all;
}
</style>
